<template>
  <div class="customerDetail-task">
    <el-tabs v-model="activeIndex" @tab-click="handleSelectMenu">
      <el-tab-pane label="个人SOP" name="1"></el-tab-pane>
      <el-tab-pane label="群SOP" name="2"></el-tab-pane>
      <el-tab-pane label="群发客户" name="3"></el-tab-pane>
      <el-tab-pane label="企业朋友圈" name="4"></el-tab-pane>
      <el-tab-pane label="客户旅程任务" name="5"></el-tab-pane>
    </el-tabs>
    <div class="task-content" v-loading="loadingFollow">
      <template v-if="activeIndex == '1'">
        <NormalSop :activeIndex="activeIndex" :normalList="singleSopList"></NormalSop>
      </template>
      <template v-if="activeIndex == '2'">
        <NormalSop :activeIndex="activeIndex" :normalList="groupSopList"></NormalSop>
      </template>
      <template v-if="activeIndex == '3'">
        <NormalSop :activeIndex="activeIndex" :normalList="groupSendList"></NormalSop>
      </template>
      <template v-if="activeIndex == '4'">
        <NormalSop :activeIndex="activeIndex" :normalList="companyFriendShipList"></NormalSop>
      </template>
      <template v-if="activeIndex == '5'">
        <NormalSop :activeIndex="activeIndex" :normalList="customerJourney"></NormalSop>
      </template>
    </div>
  </div>
</template>

<script>
import { suffixType } from "@/utils/suffixType"
import { getTaskList } from '@/api/customer/customerManage'
import NormalSop from "./taskComponents/normalSop.vue"

export default {
  components: {
    NormalSop
  },
  data() {
    return {
      id: this.$route.query.sid,
      loadingFollow: false,
      activeIndex: '1',
      mediaTypeToText: {
        '11': "h5链接",
        '5': "海报",
        '3': "文件",
        '4': "文章",
        '99': "险种",
        '7': "多媒体",
        '8': "本地上传",
        '9': "",
        '10': "问卷",
        '100': "本地上传文件",
      },
      // 个人SOP
      singleSopList: [],
      // 群SOP
      groupSopList: [],
      // 群发送
      groupSendList: [],
      // 客户朋友圈
      companyFriendShipList: [],
      // 客户旅程
      customerJourney: [],
    };
  },
  created() {
    this.getTaskListFn('1');
    this.getTaskListFn('2');
    this.getTaskListFn('3');
    this.getTaskListFn('4');
    this.getTaskListFn('5');
  },
  watch: {
  },
  methods: {
    handleSuffixType(filename) {
      if (!filename) return
      const simpleFileName = filename.split("?sign=")[0]
      return suffixType(simpleFileName);
    },
    // 菜单选择
    handleSelectMenu(key, keyPath) {
      console.log(key, keyPath);
      this.getTaskListFn();
    },
    getTaskListFn(num) {
      const params = {
        sid: this.id,
        flag: num || this.activeIndex,
        // sid: '1663015637066211330',
        // pageNum: "1"
      };
      this.loadingFollow = true;
      getTaskList(params).then((res) => {
        if (res.code == 200) {
          if (params.flag == '1') this.singleSopList = res.data || [];
          if (params.flag == '2') this.groupSopList = res.data || [];
          if (params.flag == '3') this.groupSendList = res.data || [];
          if (params.flag == '4') this.companyFriendShipList = res.data || [];
          if (params.flag == '5') this.customerJourney = res.data || [];
        }
      }).catch(() => {
        console.log('error');
        if (params.flag == '1') this.singleSopList = [];
        if (params.flag == '2') this.groupSopList = [];
        if (params.flag == '3') this.groupSendList = [];
        if (params.flag == '4') this.companyFriendShipList = [];
        if (params.flag == '5') this.customerJourney = [];
      }).finally(() => {
        this.loadingFollow = false;
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.task-content{
  max-height: 520px;
  overflow: scroll;
}
</style>
